.good-detail {
  min-height: 100vh;
  background: linear-gradient(135deg, rgba($mall-primary-300, 0.1), rgba($mall-primary-300, 0.3));
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  
  .swiper {
    width: 100%;
    height: 750rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .card-section {
    background-color: rgba(#fff, 0.9);
    margin: 20rpx;
    padding: 30rpx;
    border-radius: $uni-border-radius-base;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
  }
  
  .info-section {
    @extend .card-section;
    margin-top: 20rpx;
    position: relative;
    z-index: 1;
    
    .price-box {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24rpx;
      
      .price-info {
        .price {
          font-size: 56rpx;
          color: $mall-primary-100;
          font-weight: bold;
          
          &::before {
            content: '¥';
            font-size: 36rpx;
          }
        }
        
        .points {
          font-size: 56rpx;
          color: $mall-accent-100;
          font-weight: bold;
          
          .unit {
            font-size: 28rpx;
            margin-left: 8rpx;
          }
        }
        
        .mixed-price {
          display: flex;
          align-items: baseline;
          
          .points {
            font-size: 48rpx;
            color: $mall-accent-100;
            font-weight: bold;
          }
          
          .unit {
            font-size: 24rpx;
            color: $mall-accent-100;
            margin-left: 4rpx;
          }
          
          .plus {
            margin: 0 12rpx;
            color: $mall-text-200;
            font-size: 28rpx;
          }
          
          .cash {
            font-size: 48rpx;
            color: $mall-primary-100;
            font-weight: bold;
            
            &::before {
              content: '¥';
              font-size: 32rpx;
            }
          }
        }
        
        .shipping {
          font-size: 24rpx;
          margin-left: 16rpx;
          
          &.free {
            color: $mall-accent-100;
            background: rgba($mall-accent-100, 0.1);
            padding: 4rpx 12rpx;
            border-radius: 20rpx;
            
            &::before {
              content: '✦';
              margin-right: 4rpx;
              font-size: 20rpx;
            }
          }
          
          &.paid {
            color: $mall-text-200;
          }
        }
      }
      
      .sales-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        
        .sales, .stock {
          font-size: 24rpx;
          color: $mall-text-200;
          line-height: 1.5;
        }
      }
    }
    
    .title {
      font-size: 36rpx;
      color: $mall-text-100;
      font-weight: bold;
      margin-bottom: 16rpx;
      line-height: 1.4;
    }
    
    .desc {
      font-size: $uni-font-size-paragraph;
      color: $mall-text-200;
      line-height: 1.6;
      margin-bottom: 20rpx;
    }
    
    .stock-shipping {
      display: flex;
      align-items: center;
      padding-top: 20rpx;
      border-top: 1px solid $mall-bg-200;
      font-size: $uni-font-size-paragraph;
      
      .stock {
        color: $mall-text-200;
        margin-right: 40rpx;
        
        &::before {
          content: '';
          display: inline-block;
          width: 12rpx;
          height: 12rpx;
          background-color: $mall-accent-100;
          border-radius: 50%;
          margin-right: 8rpx;
        }
      }
      
      .shipping {
        color: $mall-primary-100;
        
        &::before {
          content: '';
          display: inline-block;
          width: 12rpx;
          height: 12rpx;
          background-color: $mall-primary-100;
          border-radius: 50%;
          margin-right: 8rpx;
        }
      }
    }
    
    .gift-tag {
      margin-top: 20rpx;
      display: inline-flex;
      align-items: center;
      padding: 12rpx 24rpx;
      background: rgba($mall-primary-100, 0.1);
      border-radius: $uni-border-radius-base;
      
      text {
        margin-left: 12rpx;
        font-size: 26rpx;
        color: $mall-primary-100;
      }
    }
  }
  
  .address-section {
    @extend .card-section;
    
    .address-content {
        display: flex;
        align-items: center;
        
        .label {
            font-size: 28rpx;
            color: $mall-text-200;
            margin-right: 40rpx;
        }
        
        .value-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .address {
                flex: 1;
                font-size: 28rpx;
                color: $mall-text-100;
            }
            
            .no-address {
                flex: 1;
                color: $mall-primary-100;
                font-size: 28rpx;
            }
        }
    }
  }
  
  .payment-section {
    display: none;
  }
  
  .merchant-section {
    @extend .card-section;
    
    .merchant-header {
      display: flex;
      align-items: flex-start;
      
      .merchant-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: $uni-border-radius-base;
        margin-right: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
      }
      
      .merchant-info {
        flex: 1;
        
        .merchant-name {
          font-size: 32rpx;
          color: $mall-text-100;
          font-weight: bold;
          margin-bottom: 16rpx;
        }
        
        .merchant-detail {
          .merchant-desc {
            font-size: 26rpx;
            color: $mall-text-200;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .merchant-address {
            font-size: 24rpx;
            color: $mall-text-200;
            background-color: $mall-bg-100;
            padding: 6rpx 16rpx;
            border-radius: 20rpx;
            display: inline-block;
            line-height: 1.4;
          }
        }
      }
    }
  }
  
  .detail-section {
    @extend .card-section;
    
    .section-title {
      font-size: 32rpx;
      color: $mall-text-100;
      font-weight: bold;
      margin-bottom: 24rpx;
      text-align: center;
    }
    
    .detail-images {
      image {
        width: 100%;
        display: block;
        margin-bottom: 20rpx;
        border-radius: $uni-border-radius-sm;
      }
    }
  }
  
  .action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 12rpx 20rpx calc(12rpx + env(safe-area-inset-bottom) / 2);
    box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .price-display {
        padding-left: 20rpx;
        
        .price {
            font-size: 48rpx;
            color: $mall-primary-100;
            font-weight: bold;
            
            &::before {
                content: '¥';
                font-size: 32rpx;
            }
        }
        
        .points {
            font-size: 48rpx;
            color: $mall-accent-100;
            font-weight: bold;
            
            .unit {
                font-size: 24rpx;
                margin-left: 4rpx;
            }
        }
        
        .mixed-price {
            display: flex;
            align-items: baseline;
            
            .points {
                font-size: 40rpx;
                color: $mall-accent-100;
                font-weight: bold;
            }
            
            .unit {
                font-size: 24rpx;
                color: $mall-accent-100;
            }
            
            .plus {
                margin: 0 8rpx;
                color: $mall-text-200;
                font-size: 24rpx;
            }
            
            .cash {
                font-size: 40rpx;
                color: $mall-primary-100;
                font-weight: bold;
                
                &::before {
                    content: '¥';
                    font-size: 28rpx;
                }
            }
        }
        
        .gift-price {
            font-size: 32rpx;
            color: $mall-primary-100;
            font-weight: bold;
        }
    }
    
    .right-btns {
        display: flex;
        align-items: center;
        gap: 20rpx;
        
        .logistics-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8rpx;
            height: 80rpx;
            padding: 0 30rpx;
            background: $mall-primary-200;
            border-radius: 40rpx;
            color: #fff;
            font-size: 28rpx;
            border: none;
            
            &::after {
                border: none;
            }
            
            &:active {
                opacity: 0.8;
            }
        }
        
        .buy-now {
            width: 240rpx;
            height: 80rpx;
            border-radius: $uni-border-radius-base;
            font-size: 28rpx;
            font-weight: bold;
            background: linear-gradient(135deg, $mall-primary-100, $mall-primary-200);
            color: #fff;
            box-shadow: 0 4rpx 12rpx rgba($mall-primary-100, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            
            .uv-icon {
                margin-right: 8rpx;
            }
            
            &[disabled] {
                opacity: 0.5;
                background: $mall-bg-300;
                box-shadow: none;
            }
        }
    }
  }
  
  .top-btns {
    position: fixed;
    top: calc(30rpx + var(--status-bar-height));
    left: 30rpx;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 20rpx;
    
    .btn {
      width: 72rpx;
      height: 72rpx;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      
      &:active {
        background: rgba(255, 255, 255, 0.7);
      }
    }
  }
  
  .back-btn {
    display: none;
  }
}
